import React, { useContext, useMemo, useState } from 'react'
import Myback from '../components/Myback'
import Ctx from '../store/Ctx'
import { Tabs, ProductCard, Tag, Button } from 'react-vant'
import type { dataTs } from '../store/storeTs'
import type { RouteComponentProps } from 'react-router-dom'


export default function Sublist(props: RouteComponentProps) {

  //获取数据
  let obj = useContext(Ctx)

  //定义一个索引
  let [index, sedIndex] = useState<number>(1) //1推荐 2小说 3儿童

  let newlist = useMemo(() => {
    return obj.datalist.filter((item: dataTs) => {
      return item.typeId == index && item.sub
    })
  }, [obj.datalist, index])

  return (
    <div>
      {/* 导航栏 */}
      <Myback title={'订阅页'} leftText></Myback>

      {/* 标签页 */}
      <Tabs onChange={(e) => {
        //console.log(e);
        sedIndex(e as number)
      }}>
        {['推荐', '小说', '儿童'].map((item, i) => (
          <Tabs.TabPane key={item} name={i + 1} title={item}>
          </Tabs.TabPane>
        ))}
      </Tabs>

      {/* 商品卡片 点击对应的标签显示对应的卡片 */}
      <div style={{ height: 'calc(100vh - 150px)', overflowY: 'scroll' }}>
        {
          newlist.map((item: dataTs) => {
            return <ProductCard
              onClick={() => {
                //点击跳转到详情页
                props.history.push({
                  pathname: '/details',
                  state: item.id
                })
              }}
              num={<>
                <Button round size='small' type={item.sub ? 'warning' : 'default'}
                  onClick={(e) => {
                    //阻止事件冒泡
                    e.stopPropagation()
                    //订阅状态切换
                    obj.dispatch({
                      type: 'change_sub',
                      payload: item.id
                    })
                  }}>
                  {item.sub ? '已经订阅' : '免费订阅'}
                </Button>

              </>}
              key={item.id}
              desc={item.ms}
              title={item.title}
              thumb={item.img}
            />
          })
        }
      </div>


    </div>
  )
}
